<template>
    <div class="main-scrollbar">
        <el-calendar>
            <template slot="dateCell" slot-scope="{ data }">
                <p>{{ data.day | formatDate }}</p>
                <p>{{ data.day | formatFestival }}</p>
            </template>
        </el-calendar>
        <div class="row">
            <div class="wrapper-1">
                <div class="title">客户数量</div>
                <div class="grid">
                    <div class="grid-item">
                        <div class="grid-count">{{ total_users }}</div>
                        <div class="grid-text">会员总数数量</div>
                    </div>
                    <div class="grid-item">
                        <div class="grid-count">{{ users_type0 }}</div>
                        <div class="grid-text">高价值客户数</div>
                    </div>
                    <div class="grid-item">
                        <div class="grid-count">{{ users_type1 }}</div>
                        <div class="grid-text">潜力客户数</div>
                    </div>
                    <div class="grid-item">
                        <div class="grid-count">{{ users_type2 }}</div>
                        <div class="grid-text">重要换回客户数</div>
                    </div>
                    <div class="grid-item">
                        <div class="grid-count">{{ users_type3 }}</div>
                        <div class="grid-text">需刺激消费客户数</div>
                    </div>
                    <div class="grid-item">
                        <div class="grid-count">{{ users_type4 }}</div>
                        <div class="grid-text">重要发展客户数</div>
                    </div>
                    <div class="grid-item">
                        <div class="grid-count">{{ users_type5 }}</div>
                        <div class="grid-text">体验客户数</div>
                    </div>
                    <div class="grid-item">
                        <div class="grid-count">{{ users_type6 }}</div>
                        <div class="grid-text">重要挽留客户数</div>
                    </div>
                    <div class="grid-item">
                        <div class="grid-count">{{ users_type7 }}</div>
                        <div class="grid-text">沉睡客户数</div>
                    </div>
                </div>
            </div>
            <div class="wrapper-2">
                <div class="title">客户类型</div>
                <v-chart class="chart-1" :option="option1" autoresize></v-chart>
            </div>
        </div>
        <div class="row">
            <div class="wrapper-3">
                <div class="title">男女比例</div>
                <div class="box">
                    <div class="box-1">
                        <div class="box-child">
                            <img src="~@/assets/image/15.png" alt="" />
                            <div class="box-child-info">
                                <div class="box-child-count">
                                    {{ users_sex1 }}
                                </div>
                                <div class="box-child-text">人数</div>
                            </div>
                        </div>
                        <div class="box-child" style="margin-top:54px;">
                            <img src="~@/assets/image/16.png" alt="" />
                            <div class="box-child-info">
                                <div class="box-child-count">
                                    {{ users_sex2 }}
                                </div>
                                <div class="box-child-text">人数</div>
                            </div>
                        </div>
                    </div>
                    <v-chart
                        class="chart-2"
                        :option="option2"
                        autoresize
                    ></v-chart>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="wrapper-4">
                <div class="title">地图</div>
                <div class="box">
                    <v-chart
                        class="chart-3"
                        :option="option3"
                        autoresize
                    ></v-chart>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { get } from "@/assets/js/http.js";
import china from "@/assets/map/china.json";
import { registerMap } from "echarts";
import festival from "@/assets/js/festival.js"

registerMap("china", china);

export default {
    name: "view-bi",
    data() {
        return {
            option1: {
                tooltip: {
                    trigger: "item"
                },
                series: [
                    {
                        name: "客户类型",
                        type: "pie",
                        radius: "50%",
                        data: [],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)"
                            }
                        }
                    }
                ]
            },
            option2: {
                color: ["#FFCB38", "#FC8FCB"],
                tooltip: {
                    trigger: "item"
                },
                series: [
                    {
                        name: "男女比例",
                        type: "pie",
                        radius: "50%",
                        data: [],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)"
                            }
                        }
                    }
                ]
            },
            option3: {
                series: [
                    {
                        type: "map",
                        map: "china"
                    }
                ]
            },
            total_users: 0,
            users_type0: 0,
            users_type1: 0,
            users_type2: 0,
            users_type3: 0,
            users_type4: 0,
            users_type5: 0,
            users_type6: 0,
            users_type7: 0,
            users_sex1: 0,
            users_sex2: 0
        };
    },
    mounted() {
        this.getData();
    },
    filters: {
        formatDate(date) {
            const dateSplit = date.split("-");
            const day = dateSplit[2];
            return day;
        },
        formatFestival(date) {
            const dateSplit = date.split("-");
            const m = dateSplit[1];
            const d = dateSplit[2];
            return festival[m + '-' + d];
        }
    },
    methods: {
        async getData() {
            const result = await get({
                url: "/admin/user.RealmeritUser/userBiStatistics",
                params: {}
            });
            this.total_users = result.total_users;
            this.users_type0 = result.users_type0;
            this.users_type1 = result.users_type1;
            this.users_type2 = result.users_type2;
            this.users_type3 = result.users_type3;
            this.users_type4 = result.users_type4;
            this.users_type5 = result.users_type5;
            this.users_type6 = result.users_type6;
            this.users_type7 = result.users_type7;
            this.users_sex1 = result.users_sex1;
            this.users_sex2 = result.users_sex2;
            this.option1.series[0].data = [
                {
                    value: result.users_type0,
                    name: "高价值客户数(" + result.users_type0 + ")"
                },
                {
                    value: result.users_type1,
                    name: "潜力客户数(" + result.users_type1 + ")"
                },
                {
                    value: result.users_type2,
                    name: "重要换回客户数(" + result.users_type2 + ")"
                },
                {
                    value: result.users_type3,
                    name: "需刺激消费客户数(" + result.users_type3 + ")"
                },
                {
                    value: result.users_type4,
                    name: "重要发展客户数(" + result.users_type4 + ")"
                },
                {
                    value: result.users_type5,
                    name: "体验客户数(" + result.users_type5 + ")"
                },
                {
                    value: result.users_type6,
                    name: "重要挽留客户数(" + result.users_type6 + ")"
                },
                {
                    value: result.users_type7,
                    name: "沉睡客户数(" + result.users_type7 + ")"
                }
            ];
            this.option2.series[0].data = [
                {
                    value: result.users_sex1,
                    name: "男(" + result.users_sex1 + ")"
                },
                {
                    value: result.users_sex2,
                    name: "女(" + result.users_sex2 + ")"
                }
            ];
        }
    }
};
</script>

<style scoped>
.row {
    display: flex;
    margin: 15px 0;
}

.wrapper-1 {
    width: 463px;
    background: #ffffff;
    border-radius: 4px;
    overflow: hidden;
}

.title {
    font-size: 16px;
    font-weight: bold;
    color: #222222;
    margin: 15px;
}

.grid {
    height: 500px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 16px;
    margin: 30px 60px;
}

.grid-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 0 10px #4065e0;
}

.grid-item:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
}

.grid-count {
    font-size: 18px;
    font-weight: bold;
    color: #4065e0;
    text-align: center;
}

.grid-text {
    font-size: 14px;
    font-weight: 400;
    color: #222222;
    text-align: center;
    margin-top: 15px;
}

.wrapper-2 {
    flex-grow: 1;
    background: #ffffff;
    border-radius: 4px;
    overflow: hidden;
    margin-left: 20px;
}

.chart-1 {
    width: 600px;
    height: 600px;
    margin: 0 auto;
}

.wrapper-3 {
    flex-grow: 1;
    background: #ffffff;
    border-radius: 4px;
    overflow: hidden;
}

.box {
    display: flex;
    align-items: center;
}

.box-1 {
    margin-left: 68px;
}

.box-child {
    display: flex;
    align-items: center;
    width: 206px;
    height: 60px;
    background: #f2f3f5;
    border-radius: 29px;
}

.box-child img {
    width: 60px;
    min-width: 60px;
    height: 60px;
}

.box-child-info {
    flex-grow: 1;
}

.box-child-count {
    font-size: 18px;
    font-weight: bold;
    color: #222222;
    text-align: center;
}

.box-child-text {
    font-size: 14px;
    font-weight: 400;
    color: #222222;
    text-align: center;
    margin-top: 5px;
}

.chart-2 {
    flex-grow: 1;
    height: 400px;
    margin-left: 50px;
}

.wrapper-4 {
    flex-grow: 1;
    background: #ffffff;
    border-radius: 4px;
    overflow: hidden;
}

.chart-3 {
    flex-grow: 1;
    height: 600px;
}
</style>